<template>
  <div class="app-container announcement-container">
    <div class="announcement-box">
      <h4>运维公告</h4>
      <p style="text-indent:40px">各位同事，玄武运维自动化平台已经上线启用。<!--  (<span target="_blank" style="color:#448ee1">http://opsold.ikuko.com/</span>) -->自动化平台除了运维工单系统、发布系统之外，后续还会上线更精彩的功能，敬请期待！</p>
      <p class="txt-right">
        <span>系统管理员</span>
        <br>
        <span>2020-05-25</span>
      </p>
    </div>
    <div class="work-order-box">
      <dl>
        <dt>待办事项</dt>
        <dd @click="goWorkList">
          <span>工单</span>
          <span class="txt-right">{{ workOrderCount }}</span>
        </dd>
      </dl>
    </div>
    <div class="app-box">
      <h4>常用系统</h4>
      <ul class="app-list">
        <a v-for="item in list" :key="item.id" :title="item.name" :href="item.link" target="_blank">
          <li>{{ item.name }}</li>
        </a>
      </ul>
    </div>
  </div>
</template>
<script>
import { fetchToDoCount } from '@/api/worklist/workList'
export default {
  name: 'Announcement',
  data() {
    return {
      list: [
        {
          id: 5,
          name: '统一认证平台',
          link: 'http://sso.idanchuang.com'
        }
      ],
      workOrderCount: 0
    }
  },
  created() {
    this.getToDoCount()
  },
  methods: {
    getToDoCount() {
      fetchToDoCount().then(res => {
        this.workOrderCount = res.data
      })
    },
    goWorkList() {
      this.$router.replace('/worklist/myWorkList')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.announcement-container {
  padding:4%;
  margin:0 auto;
  h4 {
    margin: 0 0 30px;
  }
  h4:before {
    content: "";
    margin-right: 6px;
    border-left: 2px solid #2285e1;
  }
  p {
    line-height: 32px;
  }
  .txt-right {
    text-align: right;
    float: right;
  }
  .announcement-box {
    display: inline-block;
    width: 70%;
    height: 240px;
  }
  .work-order-box {
    display: inline-block;
    width: 24%;
    margin-left: 4%;
    border: 1px solid #e1e1e1;
    vertical-align: top;
    height: 240px;
    dl {
      padding: 0 20px;
      dt,
      dd {
        line-height: 44px;
      }
      dd {
        padding: 0;
        margin: 0;
        background: #f5f5f7;
        padding:0 25px;
        cursor: pointer;
      }
    }
  }
  .app-box {
    padding-top:60px;
    h4 {
      margin: 0;
    }
    .app-list {
      margin: 0;
      padding: 0;
    }
    .app-list li {
      display: inline-block;
      margin-top: 20px;
      width: 23%;
      height: 80px;
      line-height: 80px;
      text-indent: 20px;
      -webkit-transition: all 250ms;
      transition: all 250ms;
      margin-right: 2%;
      vertical-align: middle;
      border: 1px solid #e1e1e1;
      -webkit-box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px;
      box-shadow: rgba(0, 0, 0, 0.16) 0px 2px 2px 0px;
      position: relative;
    }
    .app-list li .link {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 10px;
      height: 10px;
      line-height: 10px;
      text-align: left;
      border-radius: 5px;
      background: #67c23a;
    }
  }

  .hand {
    display: block;
    cursor: pointer;
    color: #1c7fc9;
    text-align: left;
  }
}
</style>
